<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '退款',
			size: '550px',
			appendToBody: true
		}"
		showConfirm
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-form-item label="订单金额" prop="real_amount">
						<el-input
							v-model="info.real_amount"
							disabled
							placeholder="请输入订单金额"
						/>
					</el-form-item>
					<el-form-item label="支付方式">
						<el-tag class="mr-1" v-for="(item, index) in info.paylists" :key="index"
							>{{ item.pay_name }}支付：￥{{ item.pay_amount }}</el-tag
						>
					</el-form-item>
					<el-form-item label="退款日期" prop="back_date">
						<cl-date-picker
							v-model="form.back_date"
							placeholder="选择日期"
							style="width: 100%"
							value-format="yyyy-MM-dd"
							:clearable="false" 
						/>
					</el-form-item>
					<el-form-item label="退款项目" style="margin-bottom: 0" prop="itemsIdArr">
						<cl-select
							v-model="form.itemsIdArr"
							placeholder="请选择退款项目"
							style="width: 100%"
							@change="itemsIdChange"
							multiple
							collapse-tags
							clearable
							filterable
						>
							<el-option
								v-for="item in mainlists"
								:key="item.list_id"
								:label="item.prod_name"
								:value="item.list_id"
							/>
						</cl-select>
						<!-- <div class="tips" style="margin-bottom: 10px">默认不选为全部退款</div> -->
						<el-table border :data="form.items" v-if="form.items.length > 0">
							<el-table-column
								label="退款项目名称"
								prop="prod_name"
								min-width="180"
								:showOverflowTooltip="true"
							/>
							<el-table-column
								label="支付金额"
								prop="real_amount"
								width="90"
							></el-table-column>
							<el-table-column label="退款金额" prop="price" width="170">
								<template slot-scope="{ row, $index }">
									<div class="flex flex-align-center">
										<el-form-item
											:prop="`items[${$index}].refund_money`"
											:rules="rules.refund_money"
											style="margin-bottom: 0"
										>
											<el-input
												v-model="row.refund_money"
												placeholder="请输入退款金额"
												oninput="value=value.replace(/[^\d^\.]/g,'')"
												style="flex: 1"
											>
												<template slot="prepend">￥</template>
											</el-input>
										</el-form-item>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="退款类型" prop="refund_type" width="170">
								<template slot-scope="{ row, $index }">
									<div class="flex flex-align-center">
										<el-form-item
											:prop="`items[${$index}].refund_type`"
											:rules="rules.refund_type"
											style="margin-bottom: 0"
										>
											<cl-select
												v-model="row.refund_type"
												placeholder="请选择退款类型"
												style="width: 100%"
												collapse-tags
												clearable
												filterable
											>
												<el-option
													v-for="item in info.paylists"
													:key="item.pay_id"
													:label="item.pay_name"
													:value="item.pay_id"
												/>
											</cl-select>
											<!-- <el-input
												v-model="row.pay_name"
												placeholder="请选择退款类型"
												oninput="value=value.replace(/[^\d^\.]/g,'')"
												style="flex: 1"
											>
												<template slot="prepend">￥</template>
											</el-input> -->
										</el-form-item>
									</div>
								</template>
							</el-table-column>
							<!-- <el-table-column label="操作" width="80">
								<template slot-scope="{ $index: index }">
									<el-button @click="deleteServe(index)">删除</el-button>
								</template>
							</el-table-column> -->
						</el-table>
					</el-form-item>
				</el-card>
			</el-form-item>
			<!-- <el-form-item label="退款金额" prop="refund_money">
				<el-input
					v-model="form.refund_money"
					oninput="value=value.replace(/[^\d^\.]/g,'')"
					placeholder="请输入退款金额"
				>
					<template slot="prepend">￥</template>
				</el-input>
			</el-form-item> -->
			<!-- <el-form-item label="退款成本" prop="refund_cost">
				<el-input
					class="clear-number-input"
					type="number"
					v-model="form.refund_cost"
					placeholder="请输入退款成本"
				/>
			</el-form-item>
			<el-form-item label="退款类型" prop="refund_type">
				<cl-select
					v-model="form.refund_type"
					placeholder="请选择退款类型"
					style="width: 100%"
					filterable
				>
					<el-option
						v-for="item in $const.REFUND_TYPE"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="责任老师" prop="responsible_id">
				<cl-select
					v-model="form.responsible_id"
					filterable
					placeholder="请选择责任老师"
					multiple
					collapse-tags
					style="width: 100%"
				>
					<el-option
						v-for="item in teacherList"
						:key="item.user_id"
						:label="item.user_name"
						:value="item.user_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="银行" prop="bank_type">
				<cl-select
					v-model="form.bank_type"
					filterable
					placeholder="请选择银行"
					style="width: 100%"
				>
					<el-option
						v-for="item in bankTypes"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="卡号" prop="back_account">
				<el-input
					v-model="form.back_account"
					oninput="value=value.replace(/[^\d^\.]/g,'')"
					placeholder="请输入卡号"
				/>
			</el-form-item>
			<el-form-item label="持卡人" prop="bank_name">
				<el-input v-model="form.bank_name" placeholder="请输入持卡人" />
			</el-form-item>
			<el-form-item label="退款原因" prop="detail">
				<el-input
					v-model="form.detail"
					placeholder="请填定原因"
					type="textarea"
					:rows="3"
				/>
			</el-form-item>
			<el-form-item label="上传图片">
				<cl-upload
					multiple
					:limit="5"
					:limit-size="5"
					list-type="picture-card"
					ref="uploads"
					v-model="images"
				/>
				<div class="tips">最多可上传5张图片，文件小于3M</div>
			</el-form-item> -->
		</el-form>
	</cl-drawer>
</template>
<script>
import dayjs from 'dayjs';

	export default {
		data() {
			return {
				info: {
					mainlists: [],
					paylists: []
				},
				form: {
					// refund_money: "", //退款金额
					refund_cost: 0, // 退款成本
					refund_type: "",
					bank_type: "",
					back_account: "",
					back_date: dayjs().format("YYYY-MM-DD"),
					bank_name: "",
					detail: "",
					items: [],
					itemsIdArr: [],
					responsible_id: []
				},
				rules: {
					refund_money: [
						{ required: true, message: "请填写退款金额" },
						// { pattern: /^\+?[1-9]\d*$/, message: "退款金额需大于0" }
						{ pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: "请输入正确的退款金额" }
					],
					refund_type: [{ required: true, message: "请选择退款类型" }],
					// responsible_id: [{ required: true, message: "请选择责任老师" }],
					bank_type: [{ required: true, message: "请选择银行卡类型" }],
					back_account: [
						{ required: true, message: "请填写卡号" }
						// { pattern: /^([1-9]{1})(\d{14}|\d{18})$/, message: "请输入正确的银行卡号" }
					],
					bank_name: [{ required: true, message: "请填写持卡人" }],
					detail: [{ required: true, message: "请填写退款原因" }],
					itemsIdArr: [{ required: true, message: "请选择退款项目" }]
				},
				saving: false,
				images: [],
				teacherList: []
			};
		},
		computed: {
			mainlists() {
				const { mainlists } = this.info;
				return (mainlists || []).filter((v) => Boolean((v?.real_amount || 0) * 1));
			}
		},
		methods: {
			open(row) {
				this.$refs.drawer.create(() => {
					this.getTeacherList(row)
					// console.log(row);
					this.info = { ...row };
					this.form.main_id = this.info.main_id;
				});
			},
			close() {
				this.$refs.drawer.close();
			},
			reset() {
				this.$refs.form.resetFields();
				this.form.itemsIdArr = [];
				this.form.items = [];
				this.images = [];
			},
			itemsIdChange(v) {
				const arr =
					this.mainlists
						?.filter((e) => v.includes(e.list_id))
						?.map((e) => {
							return {
								list_id: e.list_id,
								prod_name: e.prod_name,
								real_amount: e.real_amount,
								refund_money: ""
							};
						}) ?? [];

				this.form.items = arr;
			},

			submit() {
				let str=''
				this.form.responsible_id.forEach(item => {
					str+=','+item
				});
				str=str.slice(1)
				this.$refs.form.validate(async (valid, errors) => {
					this.showFormErr(errors);
					if (!valid) return;
					let { refund_cost, items,bank_type,...args } = this.form;
					let form = {
						...args,
						refund_cost: refund_cost || 0,
						images: this.images.length ? this.images.toString() : '',
						items,
						bank_type
					};
					// if (this.form.items && this.form.items.length > 0) {
					// 	form.refund_money = this.form.items.map(e => e.refund_money).reduce((prev, num) => parseFloat(num) + parseFloat(prev))
					// }
					form.responsible_id=str
					this.saving = true;
					await this.$service.order.lyrefund(form).done(() => {
						this.saving = false;
					});
					this.$message.success("操作成功");
					this.$emit("confirm");
					this.close();
				});
			},
			//获取人员
			async getTeacherList(row) {
				let { dept_id } = row;
				this.teacherList = [];
				const { data } = await this.$service.user.list({
					dept_id,
					page_size: 1000,
					page: 1
				});
				this.teacherList = data;
			},
			// 正则验证银行卡方法
			check(content) {
				var regex =
					/^(998801|998802|622525|622526|435744|435745|483536|528020|526855|622156|622155|356869|531659|622157|627066|627067|627068|627069)\d{10}$/;
				if (regex.test(content)) {
					return true;
				}
				return false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.refundtotal {
		font-size: 14px;
		color: #555555;
		margin-right: 10px;
		&.f-12 {
			font-size: 12px;
			color: #d9d9d9;
		}
	}
</style>
